<template>
  <d2-container>
      <div class="search" style="display:flex;">
        <span>收件人：</span>
        <el-input size="small" v-model="searchNum" placeholder="请输入收件人" style="width:200px;margin-right:10px;"></el-input>
        <el-button type="primary" size="small" @click="searchClick">搜索</el-button>
        <el-button type="primary" size="small" @click="sendOrderTemplates()">导出发货模版</el-button>
        <el-upload
          class="upload-demo"
          style="margin-left:10px;"
          action="/api/va/excel/excel_get_dispatched"
          :on-success="handleSuccess"
          :headers="token"
          multiple>
          <el-button type="danger" size="small">导入批量发货</el-button>
        </el-upload>
      </div>
    <br/>
      <el-table :data="tableData" header-align="center" border style="width: 100%">
        <el-table-column prop="id" align="center" label="序号" width="100"></el-table-column>
        <el-table-column prop="waybill_num" align="center" label="运单号">
              <template slot-scope="scope">
                <el-popover
                  placement="top"
                  ref="popover5"
                  title="运单号"
                  width="200"
                  trigger="click"
                  :content="orderlistnum">
                </el-popover>
                <el-button type="primary" v-popover:popover5 v-if="scope.row.waybill_num == ''" @click="checkings(scope.row.order_num)">查看</el-button>
                <span type="primary" v-if="scope.row.waybill_num != ''">{{scope.row.waybill_num}}</span>
              </template>
        </el-table-column>
        <el-table-column prop="receiver_name" align="center" label="收件人姓名"></el-table-column>
        <el-table-column prop="receiver_phone" align="center" label="收件人手机号"></el-table-column>
        <el-table-column prop="receiver_prov" align="center" label="收件人省份"></el-table-column>
        <el-table-column prop="receiver_city" align="center" label="收件人城市"></el-table-column>
        <el-table-column prop="receiver_county" align="center" label="收件人区县"></el-table-column>
        <el-table-column prop="receiver_address" align="center" label="收件人详细地址"></el-table-column>
        <el-table-column prop="status" align="center" label="状态">
          <template slot-scope="scope">
            {{['','使用','退回'][scope.row.status]}}
          </template>
        </el-table-column>
        <el-table-column prop="order_num" align="center" label="订单号"></el-table-column>
        <el-table-column prop="create_time" align="center" label="创建时间"></el-table-column>
      </el-table>
      <el-pagination :page-size="pageSize" @current-change="pageChange" @size-change="pageSizeChange"
                     layout="sizes, prev, pager, next" :total="totalItem" :page-sizes="[20, 50, 100, 200]">
      </el-pagination>
  </d2-container>
</template>
/api/va/excel/excel_get_dispatched
<script>
import {pid_get_order, waybill_list} from "@/api/api";
    export default {
        name: "OrderListGood",
      data(){
          return{
            tableData:[],
            pageIndex: 1,
            searchNum: '',
            totalItem: 0,
            pageSize: 100,
            orderlistnum:"",
            token: {
              'Token': JSON.parse(localStorage.getItem('token'))
            },
          }
      },
      created() {
        this.waybill_lists()
      },
      methods:{
        handleSuccess(file) {
          if (file.Status == 200) {
            this.$message({
              type: "success",
              message: file.Message
            })
            this.waybill_lists()
          }
        },
        sendOrderTemplates(){
          window.open('http://kww.zsfqlm.com/excel/moban/sendOrderTemplate.xlsx')
        },
        checkings(order_num){
          console.log(order_num);
          let params = {
            ordernum:order_num
          }
          pid_get_order(params).then((res)=>{
            console.log(res);
            this.orderlistnum = res.Message
          })
        },
        // 分页
        pageChange(pageIndex) {
          this.pageIndex = pageIndex
          this.waybill_lists()
        },
        pageSizeChange(pageSize) {
          this.pageIndex = 1
          this.pageSize = pageSize
          this.waybill_lists()
        },
        //搜索
        searchClick() {
          let params = {
            receiver_name: this.searchNum
          }
          this.getTableData(params)
        },
        //发货列表
        waybill_lists(){
          let params={
            Page:1,
            status:"",
            ordernum:"",
            waybillnum:"",
            times:[]
          }
          waybill_list(params).then((res)=>{
            this.tableData = res.Data
          })
        },
      }
    }
</script>

<style>

</style>
